<template>
  <div class="article-index">
    <van-nav-bar
        class="app-nav-bar"
        title="文章详情"
        left-arrow
        type="info"
        @click-left="$router.back()"/>
    <div class="article-list">
    <h1 class="title">{{article.title}}</h1>
    <van-cell center class="user-info">
      <div slot="title" class="name">天涯</div>
      <van-image
          width="35"
          slot="icon"
          class="avater"
          height="35"
          fit="cover"
          round
          :src="article.aut_photo"/>
      <div slot="label" class="puatee">{{article.pubdate | relativeTime}}</div>
      <van-button
          round
          size="small"
          :loading="isFollowLoading"
          @click="onFollow"
          :type="article.is_followed ? 'default':'info'"
          :icon="article.is_followed ? '' : 'plus'"
          class="follow-btn"
          >{{article.is_followed ? '已关注' : '关注'}}</van-button>
    </van-cell>
      <div class="markdown-body" ref="article-content" v-html="article.content"></div>
      <comment-list :source="articleId"/>
    </div>

    <div class="article-bottom">
      <van-button class="comment-btn" type="default" round size="small">写评论</van-button>
      <van-icon name="comment-o" info="123" color="#777"/>
      <van-icon @click="onCollect" :color="article.is_collected ? 'orange' :'#777'" :name="article.is_collected ?'star' :'star-o'"/>
      <van-icon @click="onLike" :color="article.attitude===1?'red':'#777'" :name="article.attitude===1 ? 'good-job':'good-job-o'"/>
      <van-icon color="#777" name="share"/>
    </div>
  </div>
</template>

<script>
import './github-markdown.css'
import {getArticleById,addFollow,deleteFollow,addCollect,deleteCollect,addLike,deleteLike} from '@/api/article'
import { ImagePreview } from 'vant';
import commentList from './components/commentList'
export default {
  name: "articleIndex",
  components:{
    commentList
  },
  props:{
    articleId:{
      type:[String,Number,Object],
      required:true
    }
  },
  data(){
    return{
      article:[],
      isFollowLoading:false,
    }
  },
  created() {
    this.loadArticle()
  },
  methods:{
    async loadArticle(){
      const {data}=await getArticleById(this.articleId)
      this.article=data.data
      this.$nextTick(()=>{
        this.handlePerviewImage()
      })

    },
    handlePerviewImage(){
      const articleContent=this.$refs['article-content']
      const imgs=articleContent.querySelectorAll('img')
      const imgPath=[]
      imgs.forEach((img,index)=>{
        imgPath.push(img.src)
        img.onclick=function (){
          ImagePreview({
            images:
              imgPath,
            startPosition: index,
          });
        }
      })
    },
    async onFollow(){
      this.isFollowLoading=true
      if (this.article.is_followed){
        await deleteFollow(this.article.aut_id)
      }else {
       await addFollow(this.article.aut_id)
      }
      this.article.is_followed=!this.article.is_followed
      this.isFollowLoading=false
      this.$toast.success(`${this.article.is_followed ? '' : '取消'}关注成功`)
    },
    async onCollect(){
      this.$toast.loading({
        message:'操作中',
        forbidClick:true
      })
      if (this.article.is_collected){
        await deleteCollect(this.articleId)
      }else {
        await addCollect(this.articleId)
      }
      this.article.is_collected=!this.article.is_collected
      this.$toast.success(`${this.article.is_collected ? '' : '取消'}收藏成功`)
    },
    async onLike(){
      this.$toast.loading({
        message:'操作中',
        forbidClick:true
      })
      if (this.article.attitude===1){
        await deleteLike(this.articleId)
        this.article.attitude=-1
      }else {
        await addLike(this.articleId)
        this.article.attitude=1
      }
      this.$toast.success(`${this.article.attitude===1 ? '' : '取消'}点赞成功`)
    }
  }
}
</script>

<style scoped lang="less">
/deep/.van-nav-bar__title{
  color: #ffffff;
}
/deep/.van-nav-bar .van-icon{
    color: #ffffff;
}
.article-list{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 40px;
  top: 45px;
  overflow-y: auto;
}
.app-nav-bar{
  background-color: #3a8ee6;
}
.title{
  font-size: 20px;
  color: #3a3a3a;
  padding: 14px;
  background-color: #ffffff;
  margin: 0;
}
.user-info{
  .avater{
    width: 35px;
    height: 35px;
    margin-right: 8px;
  }
  .name{
    font-size: 12px;
    color: #3a3a3a;
  }
  .puatee{
    font-size: 11px;
    color: #3a3a3a;
  }
  .follow-btn{
    width: 85px;
    height: 29px;
  }
}
.markdown-body{
  padding:14px;
  background-color: #ffffff;
  list-style: unset;
}
.article-bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  box-shadow:0px 0px 1px #000;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 22px;
  .comment-btn{
    width: 200px;
  }
}
</style>